<template>
  <div class="el-card-client relative">
    <el-card
      class="!border-none"
      style="height: calc(100vh - 7rem); overflow-y: auto"
      shadow="never"
    >
      <template #header v-if="appStore.isSearchShow">
        <el-row :gutter="10">
          <el-col :span="10">
            <el-input
              class="input_style"
              v-model="queryParams.keywords"
              clearable
              placeholder="请输入搜索关键字"
            />
          </el-col>
          <el-col :span="6">
            <el-button
              type="primary"
              @click="getLists"
              class="btn_style mr_10"
              color="#63ccba"
            >
              <template #icon>
                <el-icon color="#fff">
                  <Search />
                </el-icon> </template
              >搜索
            </el-button>
            <el-button @click="resetParams">重置</el-button>
          </el-col>
          <!-- <el-col :span="8" class="flex justify-end">
            <move-button></move-button>
          </el-col> -->
        </el-row>
      </template>
      <div class="title_height">
        <h3 class="fz_16 font600 text_center mb_10">{{ title }}</h3>
        <el-table :data="pager.lists" border stripe class="fz16">
          <!--
          max-height="calc(100vh - 18rem)"
           v-loading="pager.loading" -->
          <el-table-column
            label="序号"
            width="55"
            align="center"
            prop="number"
          ></el-table-column>
          <el-table-column label="名称" align="center" width="230">
            <template #default="{ row }">
              <div>
                <p class="blue">{{ row.name }}</p>
                <p class="cursor_p" @click="editRemark(row, '1')">
                  备注：
                  <span class="red font600">{{ row.remark }}</span>
                </p>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="访问量" prop="visits" align="center" />
          <el-table-column label="关注度" align="center">
            <template #default="{ row }">
              <span class="fz_16 red font600">{{ row.hot }}</span>
            </template>
          </el-table-column>
          <el-table-column label="人气" prop="popularity" align="center">
            <template #default="{ row }">
              <span class="red">{{ row.popularity }}</span>
            </template> </el-table-column
          >darkGreen
          <el-table-column label="总票数" prop="votes" align="center">
            <template #default="{ row }">
              <div class="darkGreen">{{ row.votes }}</div>
            </template>
          </el-table-column>
          <el-table-column label="助力" align="center">
            <template #default="{ row }">
              <div class="red">{{ row.or_num }}</div>
            </template>
          </el-table-column>
          <el-table-column label="限制天/时/分" align="center" width="80">
            <template #default="{ row }">
              {{ row.day_num }}/{{ row.hour_num }}/{{ row.minute_num }}
            </template>
          </el-table-column>
          <el-table-column
            label="秒数"
            prop="command_num"
            align="center"
            width="55"
          />
          <el-table-column label="范围" align="center" width="90">
            <template #default="{ row }"
              >{{ row.start_num }} - {{ row.end_num }}</template
            >
          </el-table-column>
          <el-table-column
            label="状态"
            prop="create_time"
            align="center"
            width="90"
          >
            <template #default="{ row }">
              <el-switch
                v-model="row.status"
                :active-value="1"
                :inactive-value="0"
                @change="updateStatus(row)"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="刷新"
            prop="create_time"
            align="center"
            width="55"
          >
            <template #default="{ row }">
              <el-icon
                class="rotate"
                style="font-size: 22px; font-weight: bold; cursor: pointer"
                @click="getLists"
              >
                <Refresh />
              </el-icon>
              <!-- <el-switch
                v-model="row.is_report"
                active-value="1"
                inactive-value="0"
                @change="updateReport(row)"
              />-->
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="100">
            <template #default="{ row }">
              <el-row :gutter="5" class="itemsCenter fz16">
                <el-col :span="10">
                  <el-link
                    @click="editRemark(row, '2')"
                    type="warning"
                    class="fz16"
                    >选手配置</el-link
                  >
                </el-col>
                <el-col :span="10">
                  <el-link
                    @click="editRemark(row, '3')"
                    type="warning"
                    class="fz16"
                    >票数更改</el-link
                  >
                </el-col>
                <el-col :span="2">
                  <el-dropdown trigger="click">
                    <span class="el-dropdown-link">
                      <el-icon class="el-icon--right yellow">
                        <arrow-down />
                      </el-icon>
                    </span>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item>
                          <el-link
                            @click="editRemark(row, '4')"
                            :underline="false"
                            type="danger"
                            class="fz16"
                            >访问限制</el-link
                          >
                        </el-dropdown-item>
                        <el-dropdown-item>
                          <el-link
                            :underline="false"
                            type="success"
                            @click="cpoyLink(row.link)"
                            class="fz16"
                            >复制链接</el-link
                          >
                        </el-dropdown-item>
                        <el-dropdown-item>
                          <router-link
                            :to="{
                              path: getRoutePath(
                                'activity.zg_player_comment/lists'
                              ),
                              query: {
                                topTitle: title,
                                id: row.id,
                                name: row.name,
                                images: row.image,
                              },
                            }"
                          >
                            <el-link
                              :underline="false"
                              type="primary"
                              class="fz16"
                              >选手评论</el-link
                            >
                          </router-link>
                        </el-dropdown-item>
                        <el-dropdown-item>
                          <el-link
                            :underline="false"
                            type="primary"
                            @click="leavePlayLog(row)"
                            class="fz16"
                            >选手日志</el-link
                          >
                        </el-dropdown-item>
                        <el-dropdown-item>
                          <el-link
                            underline="false"
                            type="primary"
                            @click="leaveGiftLog(row)"
                            class="fz16"
                            >助力日志</el-link
                          >
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="flex mt-4 position">
        <pagination v-model="pager" @change="getLists" />
      </div>
    </el-card>
    <el-dialog v-model="dialogFormVisible" width="400px" :title="titleForm">
      <el-form :model="formGet" v-if="titleType == '1'" @submit.native.prevent>
        <el-form-item>
          <el-input
            v-model="formGet.remark"
            @keyup.native.enter="handleSubmit(ruleFormRef)"
          />
        </el-form-item>
      </el-form>
      <el-form :model="formGet" v-if="titleType == '2'">
        <el-form-item label="范围">
          <div class="flex justify-between" style="width: 100%">
            <el-input-number style="width: 100%" v-model="formGet.start_num" />
            <span style="width: 30px; text-align: center">~</span>
            <el-input-number style="width: 100%" v-model="formGet.end_num" />
          </div>
        </el-form-item>
        <el-form-item label="任务执行间隔秒" style="align-items: center">
          <!-- <el-input v-model="formGet.command_num" /> -->
          <el-select
            v-model="formGet.command_num"
            placeholder="Select"
            style="width: 240px"
          >
            <el-option label="120" value="120" />
            <el-option label="60" value="60" />
            <el-option label="45" value="45" />
            <el-option label="30" value="30" />
            <el-option label="15" value="15" />
            <el-option label="10" value="10" />
            <el-option label="5" value="5" />
          </el-select>
        </el-form-item>
      </el-form>
      <el-form :model="formGet" v-if="titleType == '3'" @submit.native.prevent>
        <el-form-item>
          <div class="input_style flex justifyCenter">
            <el-radio-group v-model="formGet.radioType" class="ml-4">
              <el-radio label="1" size="large">增加票数</el-radio>
              <el-radio label="2" size="large">减少票数</el-radio>
            </el-radio-group>
          </div>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model.number="formGet.votes"
            @submit.native.prevent
            placeholder="请输入票数"
            @keyup.native.enter="handleSubmit(ruleFormRef)"
          />
        </el-form-item>
      </el-form>
      <el-form :model="formGet" v-if="titleType == '4'">
        <el-form-item label="每天票数" label-width="100px">
          <el-input v-model="formGet.day_num" />
        </el-form-item>
        <el-form-item label="每小时票数" label-width="100px">
          <el-input v-model="formGet.hour_num" />
        </el-form-item>
        <el-form-item label="每分钟票数" label-width="100px">
          <el-input v-model="formGet.minute_num" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button class="mr_10" @click="handleClose(ruleFormRef)"
            >取 消</el-button
          >
          <el-button
            type="primary"
            class="ml_10"
            @click="handleSubmit(ruleFormRef)"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>
    <QR-code-url
      :QrCodeVisible="QrCodeVisible"
      :QrCodeUrl="QrCodeUrl"
      @close="QrCodeVisible = false"
    ></QR-code-url>
  </div>
</template>

<script lang="ts" setup name="zgGiftLogLists">
import { ref, onMounted, nextTick, reactive, computed } from "vue";
import { usePaging } from "@/hooks/usePaging";
import { useDictData } from "@/hooks/useDictOptions";
import type { FormInstance, FormRules } from "element-plus";
import {
  apiZgPlayerManages,
  apiZgPlayerManagesStatus,
  apiZgPlayerManagesConfigure,
  apiZgPlayerManagestChange,
  apiZgPlayerManagesBlacklist,
} from "@/api/zg_player_manage";
import { apiZgPlayerRemark } from "@/api/zg_player_list";
import { timeFormat } from "@/utils/util";
import { getRoutePath } from "@/router";
import feedback from "@/utils/feedback";
import moveButton from "@/components/moveButton/index.vue";
import QRCodeUrl from "@/components/QRCodeUrl/index.vue";
import useClipboard from "vue-clipboard3";
const router = useRouter();
const route = useRoute();
//获取路由传参
const title = route.query.topTitle;
import { ElMessage } from "element-plus";
import useAppStore from "@/stores/modules/app";
const appStore = useAppStore();

const isMobile = computed(() => {});

// 路由跳转
const leavePlayLog = (row: Object) => {
  //   alert(1111);
  router.push({
    path: getRoutePath("activity.zg_player_log/lists"),
    query: {
      topTitle: title,
      id: row.id,
      topName: row.name,
      images: row.image,
      activity_id: row.activity_id,
    },
  });
};
const leaveGiftLog = (row: Object) => {
  router.push({
    path: getRoutePath("activity.zg_gift_log/lists"),
    query: {
      topTitle: title,
      id: row.id,
      topName: row.name,
      images: row.image,
      activity_id: row.activity_id,
    },
  });
};

// 查询条件
const queryParams = reactive({
  keywords: "",
  activity_id: route.query.activity_id,
});

// 是否显示编辑框
const dialogFormVisible = ref(false);
const titleType = ref<string>(""); //弹框类型
const titleForm = ref<string | null>(""); //弹框名字
const ruleFormRef = ref<FormInstance>();
const formGet = reactive({
  id: "",
  remark: "",
  command_num: "",
  start_num: "",
  end_num: "",
  radioType: "",
  votes: "",
  day_num: "",
  hour_num: "",
  minute_num: "",
});

//编辑弹框
const editRemark = async (val: any, title: string) => {
  titleType.value = title;
  formGet.id = val.id;
  if (title == "1") {
    titleForm.value = "修改备注";
    formGet.remark = val.remark;
    await nextTick();
  } else if (title == "2") {
    titleForm.value = "人气配置";
    formGet.command_num = val.command_num;
    formGet.start_num = val.start_num;
    formGet.end_num = val.end_num;
    await nextTick();
  } else if (title == "3") {
    titleForm.value = "更改选手票数";
    await nextTick();
  } else if (title == "4") {
    titleForm.value = "编辑限制";
    formGet.day_num = val.day_num;
    formGet.hour_num = val.hour_num;
    formGet.minute_num = val.minute_num;
    await nextTick();
  }
  await nextTick();
  dialogFormVisible.value = true;
};

// 修改状态
const updateStatus = async (val: any) => {
  const form = reactive({
    id: val.id,
    status: val.status,
  });
  await apiZgPlayerManagesStatus(form);
  await nextTick();
  getLists();
};

// 提交按钮
const handleSubmit = async (formEl: FormInstance | undefined) => {
  if (titleType.value == "1") {
    const data = reactive({
      id: formGet.id,
      remark: formGet.remark,
    });
    await apiZgPlayerRemark(data);
  } else if (titleType.value == "2") {
    const data = reactive({
      id: formGet.id,
      command_num: formGet.command_num,
      start_num: formGet.start_num,
      end_num: formGet.end_num,
    });
    await apiZgPlayerManagesConfigure(data);
  } else if (titleType.value == "3") {
    const data = reactive({
      id: formGet.id,
      type: formGet.radioType,
      votes: formGet.votes,
    });
    await apiZgPlayerManagestChange(data);
  } else if (titleType.value == "4") {
    const data = reactive({
      id: formGet.id,
      day_num: formGet.day_num,
      hour_num: formGet.hour_num,
      minute_num: formGet.minute_num,
    });
    await apiZgPlayerManagesBlacklist(data);
  }
  await getLists();
  dialogFormVisible.value = false;
  //   if (!formEl) return;
  //   formEl.resetFields();
};
//关闭弹框
const handleClose = async (formEl: FormInstance | undefined) => {
  if (titleType.value == "1") {
    await ElMessage({
      icon: "warningfilled",
      message: "取消编辑",
      type: "warning",
    });
  }
  dialogFormVisible.value = false;
  if (!formEl) return;
  formEl.resetFields();
};

//   复制url
const { toClipboard } = useClipboard();
const QrCodeVisible = ref(false);
const QrCodeUrl = ref("");
const cpoyLink = async (url: string) => {
  QrCodeVisible.value = true;
  QrCodeUrl.value = url;
  return;
  navigator.clipboard
    .writeText(url)
    .then(() => {
      ElMessage({
        message: "已成功复制到剪切板",
        type: "success",
      });
    })
    .catch((err) => {
      // 复制失败
      ElMessage.error("复制失败", err);
      // console.error('复制失败')
    });
};
// 分页相关
const { pager, getLists, resetParams, resetPage } = usePaging({
  fetchFun: apiZgPlayerManages,
  params: queryParams,
});

//  顶部收益接口
const income = ref<any>({
  monthMoney: 0,
  toDayMoney: 0,
  totalMoney: 0,
});

getLists();
</script>
<style lang="scss" scoped>
@media screen and (max-width: 900px) {
  .fz16 {
    font-size: 1rem;
    // color: red !important;
  }
}
@media screen and (max-width: 1400px) {
  .fz16 {
    // font-size: 1rem;
    font-size: 0.8rem;
  }
}
@media screen and (max-width: 1500px) {
  .fz16 {
    // font-size: 1rem;
    font-size: 0.8rem;
  }
}

::v-deep.el-table .el-table__cell {
  padding: 0.3125rem 0;
}
.el-card-client {
  height: 100%;
  width: 100%;
  overflow: hidden;
  &::-webkit-scrollbar {
    display: none;
    width: 0;
  }
}
.\!border-none {
  &::-webkit-scrollbar {
    display: none;
    width: 0;
  }
}
.flex {
  display: flex !important;
}
.position {
  bottom: 0%;
}
.input_style {
  width: 100% !important;
}

.align_center {
  align-content: center;
  align-items: center;
  justify-content: left !important;
}

.el-date-editor.el-input,
.el-date-editor.el-input__wrapper {
  width: 100% !important;
}
.dialog-footer {
  padding: 15px 20px;
}
.justifyCenter {
  justify-content: center;
}
/* 隐藏水平滚动条 */
/* ---el-table滚动条公共样式--- */
// 设置滚动条的宽度
:v-deep.el-scrollbar {
  --el-scrollbar-opacity: 0 !important;
}
:deep(.el-scrollbar) {
  --el-scrollbar-opacity: 0 !important;
}
.rotate {
  &:visited {
    animation: rightRotate 1000;
  }
}
@keyframes rightRotate {
  0% {
    transform: rotate("0");
  }
  50% {
    transform: rotate("180deg");
  }
  100% {
    transform: rotate("360deg");
  }
}
</style>
